<template>
  <div class="table-view">

      <!-- 按钮区域 -->
      <el-row
        type="flex"
        class="row-bg button-tab"
        justify="space-between">
        <el-row>
          <el-button type="primary" @click="addUserInfo">添加系统</el-button>
        </el-row>
        <el-input
          v-model="input"
          suffix-icon="el-icon-search"
          placeholder="请输入内容"
          class="search-input">
        </el-input>
      </el-row>

      <!-- 表单区域 -->
      <el-table
        style="width: 100%"
        height="580px"
        :data="pop.tableData"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <!-- 系统名称 -->
        <el-table-column
          prop="date"
          label="系统名称"
          width="180">
        </el-table-column>

        <!-- AppId -->
        <el-table-column
          prop="name"
          label="AppId"
          width="180">
        </el-table-column>

        <!-- 管理员组织 -->
        <el-table-column
          prop="address"
          label="管理员组织">
        </el-table-column>

        <!-- 管理员 -->
        <el-table-column
          prop="date"
          label="管理员"
          width="180">
        </el-table-column>

        <!-- 学号/工号 -->
        <el-table-column
          prop="name"
          label="学号/工号"
          width="180">
        </el-table-column>

        <!-- 操作栏目 -->
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              @click="modifyClick(scope.$index)"
              type="text" size="medium"
              style="font-weight: 400">
              修改
            </el-button>
            <span class="line">|</span>
            <el-dropdown
              @command="handleCommand"
              placement="bottom-end"
              hide-on-click
              size="medium">
              <span class="el-dropdown-link" style="color:#409EFF">
                更多
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="rightsm">权限管理</el-dropdown-item>
                <el-dropdown-item command="rolem">角色管理</el-dropdown-item>
                <el-dropdown-item command="userm">用户管理</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加系统权限 -->
      <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="50%">
        <add-system v-if="dialogVisible"/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
import AddSystem from './AddSystem.vue'
export default {
  name: 'sysView',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pop: {
        tableData: this.data,
      },
      input: '',
      dialogVisible: false,
      multipleSelection: [],
    }
  },
  components: {
    AddSystem,
  },
  methods: {
    modifyClick( index ) {
      /* 修改 */
      this.dialogVisible = true
      console.log(index)
    },
    handleCommand( command ) {
      this.$router.push(command)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    addUserInfo() {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() =>{
          done()
        })
        .catch( () => {})
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~styles/default/table_view';
</style>